<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>elm-admin</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/layout.min.css" />
    <link rel="stylesheet" href="./css/dashboard.min.css" />
</head>

<body>
    <div id="app">
        <el-container>
            <el-header style="background: #1890ff;padding:0">
                <div class="logo" v-bind:class="{ 'min-logo': isCollapse }">
                    <span v-if="!isCollapse">elm-admin</span>
                    <span v-if="isCollapse" class="min">elm</span>
                </div>
                <button class="fl fold" @click="change_collapse">
                      <i  v-bind:class="{ 'el-icon-s-fold': !isCollapse, 'el-icon-s-unfold': isCollapse }"></i>
               </button>
                <el-menu class="fl" background-color="#1890ff" style="border:none" text-color="#fff" active-text-color="#ffd04b" mode="horizontal">
                    <el-menu-item index="1">处理中心</el-menu-item>
                    <el-menu-item index="2">我的工作</el-menu-item>
                    <el-menu-item index="3">消息中心</el-menu-item>
                </el-menu>
                <div class="header-right fr">
                    <button class="fl fold" @click="change_collapse">
                                <i class="el-icon-bell"></i>
                         </button>
                    <el-dropdown>

                        <div class="avatar">
                            <el-avatar :size="30" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                            <label>Admin</label>
                        </div>
                        <el-dropdown-menu slot="dropdown" style="width:150px;">
                            <el-dropdown-item icon="el-icon-s-custom">个人中心</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-lock">修改密码</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-switch-button" divided>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
            </el-header>
            <el-container style="height: calc(100vh - 60px);">
                <el-aside style="border-right: solid 1px #e6e6e6;width:auto">
                    <el-menu default-active="2" style="border:0;" :collapse="isCollapse">
                        <el-submenu index="1">
                            <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
              </template>

                            <el-menu-item index="1-1" data-pjax url="./dashboard.html">
                                <i class="el-icon-location"></i>工作台 </el-menu-item>
                            <el-menu-item index="1-2"> <i class="el-icon-location"></i>选项2</el-menu-item>

                            <el-menu-item index="1-3"> <i class="el-icon-location"></i>选项3</el-menu-item>

                        </el-submenu>

                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">导航二</span>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">导航三</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">导航四</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main id="container">

                </el-main>
            </el-container>
        </el-container>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/lib/pjax.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                isCollapse: false
            };
        },
        methods: {
            change_collapse: function() {
                if (this.isCollapse) {
                    this.isCollapse = false;
                } else {
                    this.isCollapse = true;
                }
            }
        }
    });
    $(function() {

        $('[data-pjax]').on("click", null, function() {
            let url = $(this).attr("url");
            $.pjax({
                url: url,
                container: '#container',
            });
        });

        $.pjax({
            url: './dashboard.html',
            container: '#container',
        });

    });
</script>

</html>